<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/api-post.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /*登录页面*/
    .login_bg {
        /*background: url("../img/loginBg.jpg") 0 0 repeat-x;*/
    }

    .loginBox {
        width: 1000px;
        margin: 0 auto;
        /*background: url("../img/login_bg.jpg") 0 0 no-repeat;*/
    }

    .loginHeader {
        padding-top: 102px;
        text-align: center;
        padding-bottom: 30px;
    }

    .loginHeader h1 {
        color: #389bff;
        text-shadow: 2px 2px 5px #5aacff;
    }

    .loginCont {
        width: 388px;
        height: 284px;
        /*border: 1px solid red ;*/
        margin: 0 auto;
    }

    .formBox {
        position: relative;
    }

    /*输入框里默认输入字体*/
    ::-webkit-input-placeholder {
        color: rgb(190, 188, 188);
        /*font-style: italic;*/
    }

    input:-moz-placeholder,
    textarea:-moz-placeholder {
        color: rgb(190, 188, 188);
        font-style: italic;
    }

    input {
        outline: none;
    }

    .loginForm {
        /*background: url("../img/formBg.png") 0 0 no-repeat;*/
        width: 320px;
        height: 140px;
        border-radius: 8px;
        padding: 90px 38px 48px 30px;
        /*border: 1px solid green;*/
    }

    .loginForm label {
        width: 20%;
        display: inline-block;
    }

    .inputbox {
        height: 60px;
    }

    .inputbox input {
        width: 66%;
        padding: 10px 5px 10px 20px;
        border: 1px solid rgb(178, 178, 178);
        border-radius: 3px;
        -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
        -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;

    }

    /*输入框得到焦点的效果*/
    .inputbox input:active, .providerAdd input:focus,
    .inputbox input:focus {
        border: 1px solid rgba(91, 90, 90, 0.7);
        background: rgba(238, 236, 240, 0.2);
        -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
        -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    }

    .subBtn {
        margin-left: 70px;
    }

    /*/!*登录页登录和重置按钮*!/.providerView a是供应商管理页面下信息查看也得返回按钮的样式*/
    input[type='submit'], input[type='reset'], .providerView a {
        width: 30%;
        cursor: pointer;
        background: #54a4d7;
        padding: 6px 18px;
        font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
        color: #fff;
        font-size: 18px;
        border: 1px solid #4682be;
        margin-bottom: 10px;
        margin-right: 22px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;

    }

    input[type='submit']:hover, input[type='reset']:hover {
        background: rgb(74, 179, 198);
    }

    input[type='submit']:active, input[type='submit']:focus,
    input[type='reset']:active, input[type='reset']:focus, .providerView a:hover, .providerView a:active {
        background: #2a5989;
        border: 1px solid rgb(12, 76, 87);
        -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
        -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    }
</style>
<body class="login_bg">
<section class="loginBox">
    <header class="loginHeader">
        <h1>VNT</h1>
    </header>
    <section class="loginCont">
        <form class="loginForm">
            <div class="inputbox">
                <label for="user">用户名：</label>
                <input id="user" type="text" name="userName" placeholder="请输入用户名" required/>
            </div>
            <div class="inputbox">
                <label for="mima">密码：</label>
                <input id="mima" type="password" name="userPassword" placeholder="请输入密码" required/>
            </div>
            <div class="subBtn">
                <input type="submit" id="submit" value="登录"/>
                <input type="reset" value="重置"/>
            </div>
            <div class="mess" style="text-align: center;">
                <span style="color: red" id="error"></span>
            </div>
        </form>
    </section>
</section>
<script>

    $('#submit').click(function (e) {
        let username = $('#user').val();
        let password = $('#mima').val();
        if (username && password) {
            username = username.replace(/\s/g, "");
            password = password.replace(/\s/g, "");
            if (username && password) {
                postLogin({
                    'username': username,
                    'password': password
                }, function (response) {
                    if (response.code === 200) {
                        setAuth(response.data);
                        window.location.replace("index.html");
                    } else {
                        $('#error').html(response.message)
                    }
                }, function (err) {
                    alert('连接服务器失败')
                })
                return false
            }
        }
    })
</script>
</body>
</html>